<template>
  <div class="user-setting">
    <!-- 登录 -->
    <div class="head-picture" @click="toAuthor">
      <img :src="userInfo.headPicture || headPicture" alt="" />
    </div>
    <div class="user-name" @click="toAuthor">
      {{ userInfo.username || "游客" }}
    </div>
    <div class="logout">
      <el-link type="warning" @click="logout" v-if="userInfo.username"
        >退出</el-link
      >
      <el-link type="warning" @click="login" v-else>登录</el-link>
    </div>
  </div>
</template>

<script>
import { removeToken } from "utils/auth";
export default {
  mounted() {},
  data() {
    return {
      headPicture:
        "https://img1.baidu.com/it/u=3415240844,1427683064&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=789",
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
  },
  methods: {
    logout() {
      removeToken();
      this.$store.commit("user/clearUserInfo");
      //       this.$store.commit("permission/clearAccessRoute")
      this.$router.push({
        path: "/login",
      });
    },
    login() {
      this.$router.push({
        path: "/login",
      });
    },
    toAuthor() {
      if (!this.userInfo.id) {
        return false;
      }
      window.open(
        "/blog/user.html?id=" + this.userInfo.id,
        "__blank"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.user-setting {
  display: flex;
  padding: 0px 15px 20px;
  justify-content: end;
  cursor: pointer;
  .head-picture {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .user-name {
    margin-right: 10px;
    line-height: 32px;
  }
  .logout {
    line-height: 32px;
  }
}
</style>
